import React from 'react';
import { MOBILE_REG } from 'utils/consts.js';
import {
  Form,
  Input,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
} from 'antd';

import styles from './index.module.less';

class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
  };
  handleSubmit = ({ e }) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  handleConfirmBlur = ({ e }) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };
  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('请再次输入你的密码');
    } else {
      callback();
    }
  };
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields([ 'confirm' ], { force: true });
    }
    callback();
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 24,
        },
        sm: {
          span: 24,
          offset: 0,
        },
      },
    };
    const prefixSelector = getFieldDecorator('prefix', {
      initialValue: '86',
    })(
      <Select className="icp-selector">
        <Select.Option value="86">+86</Select.Option>
      </Select>
    );
    return (
      <Form onSubmit={this.handleSubmit} className = {styles.form}>
        <Form.Item
          {...formItemLayout}
        >
          {getFieldDecorator('phone', {
            rules: [
              {
                required: true,
                message: '手机号码必填',
              },
              {
                pattern: MOBILE_REG,
                message: '请输入正确的手机号',
              },
            ],
          })(
            <Input addonBefore={prefixSelector} className={styles.input} placeholder="请输入手机号"/>
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
        >
          <Row gutter={0}>
            <Col span={17}>
              {getFieldDecorator('captcha', {
                rules: [{ required: true, message: 'Please input the captcha you got!' }],
              })(
                <Input className={styles.input} placeholder="短信验证码"/>
              )}
            </Col>
            <Col span={1}>
              <Button className={styles.smcode}>获取验证码</Button>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          hasFeedback
        >
          {getFieldDecorator('password', {
            rules: [{
              required: true, message: 'Please input your password!',
            }, {
              validator: this.checkConfirm,
            }],
          })(
            <Input type="password" className={styles.input} placeholder="设置你的登录密码"/>
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          hasFeedback
        >
          {getFieldDecorator('confirm', {
            rules: [{
              required: true, message: 'Please confirm your password!',
            }, {
              validator: this.checkPassword,
            }],
          })(
            <Input type="password" onBlur={this.handleConfirmBlur} className={styles.input} placeholder="请再次输入你的密码"/>
          )}
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit" className={styles.button}>同意条款并注册</Button>
        </Form.Item>
        <Form.Item {...tailFormItemLayout} style={{ marginBottom: 8 }}>
          {getFieldDecorator('agreement', {
            valuePropName: 'checked',
          })(
            <Checkbox>
              <a>蜂收部落服务条款</a>  <a>法律声明</a>  <a>隐私政策</a>
            </Checkbox>
          )}
        </Form.Item>
      </Form>
    );
  }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);

export default WrappedRegistrationForm;

